<template>
    <div id="studentchart" style="width: 100%; height: 100%;">
        
    </div>
</template>

<script setup >
import * as echarts from 'echarts'
import { nextTick, onMounted } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})
const handleData = ({tableData, currentItem, tagsData}) => {
    const lengendData = [currentItem.class.title+"班级平均分", currentItem.studentname]
    const indicatorData = tagsData.map(item => ({name: item.title, max: 5})) 

    const currentClass = tableData.filter(item => item.class._id === currentItem.class._id) 
    // console.log(currentClass)
    const average = []
    tagsData.forEach(({title},item) => {
        const filterArr = currentClass.filter(item => item.score[title]) // 过滤出来有这个属性的
       average[item]=  (filterArr.map(item => item.score[title]).reduce((total, item) => total + item, 0) / (filterArr.length || 1)
        ).toFixed(2)
    })
    // console.log(average)
    const averageData ={
            value: average,
            name: lengendData[0]
        }
    const currentObj = {
        value: tagsData.map(item => currentItem.score[item.title]? currentItem.score[item.title]: 0),
        name: lengendData[1]
    }
    const seriesData = [averageData, currentObj]

    return {
        lengendData, indicatorData, seriesData
    }
}

onMounted(() => {
    nextTick(()=>{
        var myChart = echarts.init(document.getElementById('studentchart'));

        const { lengendData , indicatorData, seriesData }= handleData(props.data)

        var option = {
            title: {
                // text: 'Basic Radar Chart'
            },
            legend: {
                data: lengendData
            },
            radar: {
                // shape: 'circle',
                indicator: indicatorData
            },
            series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: seriesData
                }
            ]
        };
        myChart.setOption(option);
    })
    
})

</script>